<template>
  <div style="margin: 0 0 10px 10px">
    <div v-for="(item, index) in noticeList">
      <el-row>
        <el-button @click="handleView(index)" type="text" style="font-size: 16px; font-weight: bold">{{item.title}}</el-button>
      </el-row>
      <el-row>
        <span style="color: #bfbfbf; font-size: 12px">{{item.gmtCreate}} by {{item.id}}</span>
      </el-row>
    </div>
    <el-dialog :title="title" :visible.sync="dialog" width="30%">
      <span>{{content}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog = false">收 到</el-button>
      </span>
    </el-dialog>
    <el-empty description="暂无通知" v-show="!noticeList.length"></el-empty>
  </div>
</template>

<script>
import { getAllNotices } from "@/api/system/notice";

export default {
  name: "NoticeItems",
  data() {
    return {
      noticeList: [],
      dialog: false,
      title: '',
      content: ''
    }
  },
  methods: {
    handleView(idx) {
      this.dialog = true
      this.title = this.noticeList[idx].title
      this.content = this.noticeList[idx].content
    },
    getNoticeList() {
      getAllNotices().then(res => {
        if(res.data.code === 200) {
          this.noticeList = res.data.noticeInfoList
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.getNoticeList()
  }
}
</script>

<style scoped>

</style>
